<template>
  <div>
    <!-- 通过grid-template-areas实现 -->
    <div class="grid-practice1">
      <div class="header">header</div>
      <div class="menu">menu</div>
      <div class="main">main</div>
      <div class="footer">footer</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'GridPractice1',
}
</script>
<style lang="less" scoped>
/** 
第一种实现方式
通过grid-template-areas
*/
.grid-practice1 {
  display: grid;
  grid-template-columns: 100px 1fr 1fr;
  grid-template-areas:
    'header header header'
    'menu main main'
    'menu footer footer';

  .header {
    grid-area: header;
    background-color: red;
    height: 40px;
  }
  .menu {
    grid-area: menu;
    background-color: aqua;
  }
  .main {
    grid-area: main;
    background-color: blueviolet;
    height: 300px;
  }
  .footer {
    grid-area: footer;
    background-color: greenyellow;
    height: 40px;
  }
}
</style>
